<template>
  <BasicTabs v-model="tabname" :tabs="tabs" @tabChange="tabsChange"> </BasicTabs>
</template>

<script setup lang="ts">
  import { TabPaneItem } from '@/components/ui/basic-tabs/types'
  import MaterialSetting from './components/materialSetting.vue'
  import MaterialSupply from './components/materialSupply.vue'
  import MachineVarietyInput from './components/machineVarietyInput.vue'
  import ChangeRecord from './components/changeRecord.vue'
  import CoefficientInput from './components/coefficientInput.vue'
  import VarietyCorresponding from './components/varietyCorresponding.vue'
  import { getGongXuBuDaiFuJi } from '@/api/gongGongChaXun'

  const tabname = ref()
  const tabs = shallowRef<TabPaneItem[]>([
    {
      name: '14210',
      label: '物料设定',
      roles: ['14210'],
      isFit: true,
      slots: { default: () => h(MaterialSetting, { listArr: list.value }) }
    },
    {
      name: '14220',
      label: '物料供应',
      roles: ['14220'],
      isFit: true,
      slots: { default: h(MaterialSupply) }
    },
    {
      name: '14230',
      label: '机台品种录入',
      roles: ['14230'],
      slots: { default: () => h(MachineVarietyInput, { listArr: list.value }) }
    },
    {
      name: '14240',
      label: '更换记录',
      roles: ['14240'],
      slots: { default: h(ChangeRecord) }
    },
    {
      name: '14250',
      label: '折合系数录入',
      roles: ['14250'],
      slots: { default: h(CoefficientInput) }
    },
    {
      name: '14260',
      label: '粗细联品种对应',
      roles: ['14260'],
      slots: {
        default: () => h(VarietyCorresponding, { type: 'roving-yarn', title: '粗细联品种对应' })
      }
    },
    {
      name: '14270',
      label: '络包联品种对应',
      roles: ['14270'],
      slots: {
        default: () => h(VarietyCorresponding, { type: 'winding-package', title: '络筒品种对应' })
      }
    }
  ])

  const tabsChange = (tab) => {
    console.log(tab)
  }

  const list = ref<any[]>([])
  onMounted(() => {
    getGongXuBuDaiFuJi().then((res) => {
      res.sort((a, b) => {
        return b.order - a.order
      })
      list.value = res
      // this.luoTongItem = this.gongXuList.find((value) => {
      //   return value.name === '络筒'
      // })
      // let item = this.gongXuList.find((value) => {
      //   return value.name === '细纱'
      // })
      // if (item === undefined) {
      //   this.tabname = this.gongXuList[0].name
      //   this.tabItem = this.gongXuList[0].name
      // }
    })
  })
</script>
